<template>
  <el-main>
      <div class="el-main">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div class="block">
              <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"></el-image>
            </div>
            <h1>商品名称：{{skuDetail.title}}</h1>
            <h2>商品价格：<span style="color:red;">{{skuDetail.price}}</span></h2>
            <el-row>
              {{skuDetail.cid1Name}}>{{skuDetail.cid2Name}}>{{skuDetail.cid3Name}}
            </el-row>
            <el-row>
              <el-col :span="5">
                商品当前配置：<br>
                品牌：{{skuDetail.brandName}}
              </el-col>
              <el-col :span="15">
                <el-table
                    :data="skuDetail.groupVOS"
                    style="width: 100%">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form label-position="left" inline class="demo-table-expand" >
                        <el-form-item  v-for="item in props.row.paramVOS">
                          <span>{{ item.name }}🐋</span>
                          <span>{{ item.value }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="属性名称"
                      prop="name">
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="4">
                剩余库存：<span style="color: red">{{skuDetail.stock}}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="addCart(skuDetail.id)">➕加入购入车🚗</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="text item">
            <el-col :span="12">
              <el-table
                  :data="skuDetail.genericVOS"
                  style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" >
                      <el-form-item  v-for="item in props.row.paramVOS">
                        <span>{{ item.name }}🐒</span><span>{{ item.value }}</span>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                    label="属性名称"
                    prop="name">
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="12">
              <div v-for="item in skuDetail.specialVOS">
                <el-col :span="5">
                  <span>{{item.name}}:</span>
                </el-col>
                <el-col :span="19">
                <el-radio-group>
                  <el-radio-button :label="arr" v-for="(arr) in item.values"></el-radio-button>
                </el-radio-group>
                </el-col>
              </div>
            </el-col>
          </div>
          <el-button style="float: right; padding: 3px 0" type="text">🚀购买</el-button>
        </el-card>
      </div>
  </el-main>
</template>

<script>
export default {
  name: "DetailView",
  data() {
    return{
      skuDetail:{},
      cart:{
        number:null,
        skuId:null
      }
    }
  },
  methods:{
    addCart(skuId) {
      this.cart.skuId = skuId;
      this.axios.post(this.$shopHost + 'api/cart/editCart', this.cart).then(res=>{
        if (res.data.result) {
          this.$message.success("加购成功！！🚀🚀🚀");
          location.reload();
        }else{
          this.$message.error("加购失败");
        }
      });
    },
    getDetail(skuId) {
      this.axios.post(this.$shopHost + 'api/spu/skuDetail/'+skuId).then(res => {
        this.skuDetail = res.data.data;
      });
    }
  },
  created() {
    let skuId = this.$route.params.skuId;
    this.getDetail(skuId);
  }
}
</script>

<style scoped>
.el-main {
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
}
</style>